<template>
	<div class="local-contact-add">
		<div class="header">
			<div class="user-list">
				<ul v-if="seletedContact">
					<li>
						<div class="user-name">{{seletedContact.name}}</div>
					</li>
				</ul>
				<div class="no-list" v-else>
					请选择联系人
				</div>
			</div>
			<div class="search">
				<label>
					<form action="javascript:return true;">
						<input type="search" placeholder="搜索" v-model.trim="searchStr" @keyup.enter="searchLocalContacts">
						<i class="icon-search"></i>
						<span class="btn-search" @click.prevent="searchLocalContacts">搜索</span>
					</form>
				</label>
			</div>
		</div>
		<div class="section">
			<div class="section-container">
				<ul>
					<li v-for="(item, key) in contactItemsSort" v-if="item.length>0">
						<div class="sort-title">{{key}}</div>
						<ul class="item-list">
							<li v-for="v in item">
								<label>
								<dl class="group-column-3">
									<dd class="group-column">
										<div class="checkbox-1">
											<input type="radio" v-model="seletedContact" :value="v">
											<span></span>
										</div>
									</dd>
									<dd class="group-column"><i class="icon-contactAvatar"></i></dd>
									<dd class="group-column">
										<span class="name">{{v.name}}</span>
										<span class="phone">{{v.phone}}</span>
									</dd>
								</dl>
								</label>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			<button class="btn btn-submit"
				@click="save"
			 	v-if="seletedContact">
			 	确定(1)
			</button>
			<button class="btn btn-submit unable" v-else>确定(0)</button>
		</div>
	</div>
</template>

<script>
import pinyin from "@/extends/module/pinyin.js"
export default {

  	name: 'local_contact_add',

  	data () {
	    return {
	    	contactItems: [],
	    	contactItemsSort: [],
	    	seletedContact: null,
	    	searchStr: ''
	    };
  	},

  	created () {
	  	this.getContactList();
	    fxAPI.api('setAppTitle', {title: '选择联系人'});
  	},

  	methods: {
	  	getContactList (offset, rowCount) {
	  		let _this = this;
	  		let WebContainer = window.WebContainer||window.navigator.WebContainer;
	  		if (!WebContainer) {
	  			// this.$toasted.show('获取联系人列表失败！');
                vm.$toast.show({
                    text:"获取联系人列表失败！",
                    translate:true,
                })
	  			return;
	  		}

			WebContainer.getLocalContactsList(JSON.stringify({
				"backId": "1000",
				"backFunc": "getLocalContactsListBackFunc"
			}));
			window.getLocalContactsListBackFunc = function(res) {
				let data = JSON.parse(_this.jsonStrReplace(res));
				_this.contactItems = data.jsonContactList;
				_this.listSort();
			}
		},

		searchLocalContacts () {
			let _this = this,
				searchStr = this.searchStr;

			let WebContainer = window.WebContainer||window.navigator.WebContainer;
	  		if (!WebContainer) {
                vm.$toast.show({
                    text:"搜索联系人失败！",
                    translate:true
                })
	  			// this.$toasted.show('搜索联系人失败！');
	  			return;
	  		}

	  		let data = JSON.stringify({
	  			"backId": '1001',
	  			"backFunc": "searchLocalContactsBackFunc",
	  			"searchStr": searchStr
	  		});
	  		WebContainer.searchLocalContacts(data);
			window.searchLocalContactsBackFunc = function(res) {
				let data = JSON.parse(_this.jsonStrReplace(res));
				_this.contactItems = data.jsonContactList;
				_this.listSort();
			}
		},

		save () {
			let data = {
				module:'contact',
				action:'addContactsOfOneUser',
				enterpriseId: this.cache.defaultEnterprise.code,
				enterpriseName: this.cache.defaultEnterprise.name,
				name: this.seletedContact.name,
				mobile: this.seletedContact.phone.replace('+86', ''),
				contactLevel: '100',
				contactSort: ''
			};
			let departmentId = this.$route.params.departmentId;
			if (departmentId && (departmentId != '0')) {
				data.departmentIds = [this.$route.params.departmentId];
			}
			this.$http.post(this.api.eab, data, {showLoading: true}).then(
	            res => {
	                if (res.body.result === 1) {
	                	// this.$toasted.show(res.body.errorMsg);
                        vm.$toast.show({
                            text:res.body.errorMsg,
                            translate:true
                        })
	                	this.$router.go(-1);
	                }
	            }
	        );
		},

		listSort () {
			let sortRule = "ABCDEFGHIJKLMNOPQRSTUVWSYZ";
			let items = {};
			sortRule.split("").forEach(v => {
				let item = [];
				for (let i=0; i<this.contactItems.length; i++) {
					if (pinyin.getCamelChars(this.contactItems[i].name.substr(0, 1)) == v) {
						item.push(this.contactItems[i]);
					}
				}
				items[v] = item;
			});
			this.contactItemsSort = items;
		},

		jsonStrReplace (str) {
			return str.replace(/\n/g,"\\\\n")
					.replace(/\'/g, "\\\\'")
					.replace(/\&/g, "\\\\&")
					.replace(/\r/g, "\\\\r")
					.replace(/\t/g, "\\\\t")
					.replace(/\b/g, "")
					.replace(/\f/g, "\\\\f");
		}
  	}
};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.local-contact-add{
		@include app-top-main-bottom(100px, 100px);

		.header{
			width: 100%;
			display: flex;
			background: #fff;
			.user-list{
				width: 200px;
				height: 100px;
				background: #fff;

				ul{
					font-size: 0;
					overflow: auto;
					white-space: nowrap;

					li{
						position: relative;
						display: inline-block;
						font-size: 24px;
						width: 100px;

						.user-name{
							margin: 15px;
							width: 70px;
							height: 70px;
							line-height: 70px;
							border: 1px solid #a7e8de;
							border-radius: 40px;
							text-align: center;
							@include text-ellipsis();
							animation: fadeInScale .2s;
						}

						@keyframes fadeInScale {
							0% {
								transform: scale(0);
							}
							100 {
								transform: scale(1);
							}
						}

					}
				}

				.no-list{
					width: 100%;
					text-align: center;
					line-height: 100px;
					font-size: 24px;
					color: #ccc;
				}
			}
			.search{
				position: relative;
				flex: 1;
				padding: 25px 0;
				input{
					width: 422px;
					height: 50px;
					background: #eee;
					border-radius: 50px;
					padding: 0 60px 0 50px;
					box-sizing: border-box;
					font-size: 24px;
				}
				.icon-search{
					left: 0;
					margin-left: 16px;
				}
				.btn-search{
					display: inline-block;
					position: absolute;
					right: 20px;
					width: 70px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #a7e8de;
					font-size: 24px;
				}
			}
		}

		.group-column-3{
			@include group-column-3(100px, 60px, 500px);
			font-size: 24px;
			background: #fff;

			.group-column:first-child:after,
			.group-column:nth-child(2):after{
				border-bottom: none;
			}
			.group-column:last-child{
				text-align: left;
				font-size: 28px;
				text-indent: 10px;
			}
		}

		.sort-title{
			width: 100%;
			height: 30px;
			color: #333;
			text-indent: 20px;
			line-height: 30px;
			font-size: 20px;
		}

		.item-list{
			li{
				&:last-child{
					dd{
						&:last-child{
							&:after{
								border-bottom: none;
							}
						}
					}
				}
				.name{
					display: block;
					margin-top: 10px;
					line-height: 50px;
				}
				.phone{
					display: block;
					line-height: 30px;
					color: #ccc;
					font-size: 24px;
				}
			}
		}



		.footer{
			box-shadow: 0 0 8px 2px #CCC;
		}
	}
</style>
